<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Draggable from "./Draggable.svelte";
    import { fn } from "storybook/test";

    const { Story } = defineMeta({
        title: "Components/Base/Draggable",
        component: Draggable,
        tags: ["autodocs"],
        argTypes: {
            axis: {
                control: "select",
                options: ["x", "y", "both"],
            },
            bounds: {
                table: {
                    defaultValue: { summary: "parent" },
                },
            },
        },
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <div style="height: 200px; position: relative">
            <Draggable>
                <div style="width: 100px; height: 100px; border: 1px solid red">
                    <div style="height: 30px" class="drag-handler">Handler</div>
                </div>
            </Draggable>
        </div>
    {/snippet}
</Story>

<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        <div style="height: 200px; position: relative">
            <Draggable {...args}>
                <div style="width: 100px; height: 100px; border: 1px solid red">禁用</div>
            </Draggable>
        </div>
    {/snippet}
</Story>

<Story name="Axis" args={{ axis: "both" }}>
    {#snippet template(args)}
        <div style="height: 200px; position: relative">
            <Draggable {...args}>
                <div style="width: 100px; height: 100px; border: 1px solid red">{args.axis}</div>
            </Draggable>
        </div>
    {/snippet}
</Story>

<Story name="Bounds" args={{ bounds: "parent", axis: "both" }}>
    {#snippet template(args)}
        <div style="height: 200px; position: relative; background: var(--cui-color-fill-0)">
            <Draggable {...args}>
                <div style="width: 100px; height: 100px; border: 1px solid red">{args.bounds}</div>
            </Draggable>
        </div>
    {/snippet}
</Story>

<Story name="Handle" args={{ handle: ".handler", bounds: "parent", axis: "both" }}>
    {#snippet template(args)}
        <div style="height: 200px; position: relative; background: var(--cui-color-fill-0)">
            <Draggable {...args}>
                <div style="width: 100px; height: 100px; border: 1px solid red">
                    <div class="handler" style="cursor: move">Handler</div>
                </div>
            </Draggable>
        </div>
    {/snippet}
</Story>

<Story name="Grid" args={{ grid: [20, 20], bounds: "parent" }}>
    {#snippet template(args)}
        <div style="height: 200px; position: relative; background: var(--cui-color-fill-0)">
            <Draggable {...args}>
                <div style="width: 100px; height: 100px; border: 1px solid red">Grid</div>
            </Draggable>
        </div>
    {/snippet}
</Story>
